<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>${title;h}</title>
    ${if externalCSS}<link rel="stylesheet" type="text/css" href="${externalCSS;u}">${else}<style type='text/css'>
      body, table {
        font-family: Verdana, Arial, sans-serif;
        font-size: 12px;
      }

      table {
        border-collapse: collapse;
      }

      th, td {
        padding-left: 0.3em;
        padding-right: 0.3em;
      }

      a {
        text-decoration: none;
      }

      div, pre {
        display: table;
        margin: 0;
      }

      pre {
        border: 1px solid #ccc;
      }

      .box, .lbox, .rbox {
        border: 1px solid #ccc;
      }

      .lbox {
        float: left;
        margin: 0.5em;
      }

      .rbox {
        float: right;
        margin: 0.5em;
      }

      .lbox th, .rbox th {
        text-align: right;
      }

      .command_line {
        margin: 0.5em;
      }

      .command_line th {
        text-align: left;
      }

      .command_line td {
        border: 1px solid #ccc;
        padding: 0.5ex 0.5em;
        font-family: monospace;
        line-height: 200%;
      }

      .arg {
        white-space: nowrap;
        border: 1px solid #ccc;
        padding: 1px;
        background-color: #efe;
      }

      .selenium {
        border: 1px solid black;
        margin: 0.5em;
      }

      .selenium th, .selenium td {
        text-align: left;
        border: 1px solid black;
      }

      .title {
        font-style: italic;
      }

      .selected {
        background-color: #ffffcc;
      }

      .indexh {
        text-align: center;
      }

      .index {
        text-align: right;
      }

      .status_unexecuted .cmd_status_unexecuted {
      }

      .status_success {
        background-color: #ccffcc;
      }

      .cmd_status_success {
        background-color: #eeffee;
      }

      .status_warning, .cmd_status_warning {
        background-color: #ffcccc;
      }

      .status_failure, .cmd_status_failure {
        background-color: #ffcccc;
      }

      .status_error, .cmd_status_error {
        background-color: #ffcccc;
      }

      .breakpoint {
        background-color: #cccccc;
        border: 1px solid black;
      }

      .number {
        text-align: right;
      }

      .tabs {
          position: relative;
          padding: 0;
      }

      .tabs ul {
          margin: 0;
          padding: 0;
      }

      .tabs li {
          list-style: none;
          display: inline-block;
      }

      .tabs input[type=radio] {
          display: none;
      }

      .tabs label {
          z-index: 2;
          position: absolute;
          top: 0;
          display: block;
          background-color: #999;
          color: #fff;
          border-style: solid solid none;
          border-width: 1px;
          border-color: black;
          width: 6em;
          height: 2.5ex;
          padding: 0.5ex 0.5em;
          text-align: center;
      }

      .tabs label:hover {
          cursor: pointer;
          background-color: #ccc;
          color: #000;
      }

      .tabs input[type=radio]:checked + label {
          background-color: #fff;
          color: #000;
      }

      .tab_source {
          left: 0;
      }

      .tab_sequence {
          left: 7.5em;
      }

      .tab_log {
          left: 15em;
      }

      .tabs .contents {
          z-index: 1;
          display: none;
          background: #fff;
          border: solid 1px black;
          margin-top: 3.5ex;
          padding: 0.5em;
          min-width: 22.5em;
      }

      .tabs input[type=radio]:checked + label + .contents {
          display: block;
      }

      .tabs p {
        margin: 0;
        line-height: 180%;
      }

      .info {
        margin-bottom: 0.5ex;
      }

      .info th {
        text-align: right;
      }
    </style>${end}
    ${if externalJS}<script type="text/javascript" src="${externalJS;u}"></script>${else}<script type="text/javascript"><!--
      // for Safari broken css handling.
      function selectTab(label) {
        var selConts = label.parentNode.getElementsByClassName('contents')[0];
        var forId = label.htmlFor;
        var tabId = document.getElementById(forId).name;
        var contents = document.getElementById(tabId).getElementsByClassName('contents');
        for (var i = 0; i < contents.length; i++) {
          var c = contents[i];
          if (c == selConts)
            c.style.display = 'block';
          else
            c.style.display = 'none';
        }
      }
 --></script>${end}
  </head>
  <body>
    <h1>${title;h}</h1>

    <div class="box">
      <div style="overflow: hidden">
        <table class="lbox">
          <tr>
            <th>Result:</th><td>${testSuite.result}</td>
          </tr>
          <tr>
            <th>Start Time:</th><td>${testSuite.stopWatch.startTimeString;h}</td>
          </tr>
          <tr>
            <th>Total Time:</th><td>${testSuite.stopWatch.durationString;h}</td>
          </tr>
          <tr>
            <th>Number of Test Total:</th><td>${numTestTotal;n}</td>
          </tr>
          <tr>
            <th>Number of Test Passes:</th><td>${numTestPasses;n}</td>
          </tr>
          <tr>
            <th>Number of Test Failures:</th><td>${numTestFailures;n}</td>
          </tr>
          <tr>
            <th>Number of Command Passes:</th><td>${numCommandPasses;n}</td>
          </tr>
          <tr>
            <th>Number of Command Failures:</th><td>${numCommandFailures;n}</td>
          </tr>
          <tr>
            <th>Number of Command Errors:</th><td>${numCommandErrors;n}</td>
          </tr>
        </table>
        <table class="rbox">
          <tr>
            <th>Selenese Runner Version:</th><td>${sysInfo.seleneseRunnerVersion;h}</td>
          </tr>
          <tr>
            <th>WebDriver Name:</th><td>${testSuite.webDriverName;h}</td>
          </tr>
          <tr>
            <th>Selenium Version:</th><td>${sysInfo.seleniumVersion;h}</td>
          </tr>
          <tr>
            <th>Java Version:</th><td>${sysInfo.javaVersion;h}</td>
          </tr>
          <tr>
            <th>Java VM Name:</th><td>${sysInfo.javaVMName;h}</td>
          </tr>
          <tr>
            <th>Operating System:</th><td>${sysInfo.operatingSystem;h}</td>
          </tr>
          <tr>
            <th>Language:</th><td>${sysInfo.language;h}</td>
          </tr>
          <tr>
            <th>Country:</th><td>${sysInfo.country;h}</td>
          </tr>
          <tr>
            <th>Time Zone:</th><td>${sysInfo.timeZone;h}</td>
          </tr>
        </table>
      </div>
${if commandLine}
      <div>
        <table class="command_line">
          <tr><th>Command Line Arguments:</th></tr>
          <tr><td>${foreach commandLine arg}<span class="arg">${arg;h}</span> ${end}</td></tr>
        </table>
      </div>
${end}
      <div>
        <table id="suiteTable" class="selenium">
          <tr class="title status_${testSuite.result}"><th>${testSuite.name}</th></tr>
${foreach seleneseList selenese}
  ${if selenese.type="TEST_SUITE"}
          <tr class="status_${selenese.result}"><td><a href="${selenese.fileBaseName}.html">${selenese.name;h}</a> (test-suite)</td></tr>
  ${end}
  ${if selenese.type="TEST_CASE"}
          <tr class="status_${selenese.result}"><td><a href="#testCase${index_selenese}">${selenese.name;h}</a></td></tr>
  ${end}
${end}
        </table>
      </div>
    </div>

${foreach testCaseList testCase}
    <br>
    <div class="tabs" id="tab${index_testCase}">
      <ul>
        <li>
          <input name="tab${index_testCase}" id="tab${index_testCase}_source" type="radio" checked>
          <label for="tab${index_testCase}_source" class="tab_source" onclick="selectTab(this)"><a name="testCase${index_testCase}">Source</a></label>
          <div class="contents">
            <table class="info"><tr><th>Source:</th><td>${testCase.filename;h}</td></tr></table>
            <table cellpadding="1" cellspacing="1" border="1">
              <thead>
                <tr class="title status_${testCase.result}"><td class="indexh">#</td><td rowspan="1" colspan="3">${testCase.name;h}</td><td>&Delta;t(ms)</td><td>Screenshot</td></tr>
              </thead>
              <tbody>
    ${foreach testCase.commandList command}
                <tr class="cmd_status_${command.result}">
                  <td class="index">${command.index;i}</td>
      ${foreach command.source item}
                  <td>${item;h}</td>
      ${end}
                  <td class="number">${@commandResults results testCase command}${foreach results result , }${result.duration;n}${end}</td>
                  <td>${foreach command.screenshots screenshot , }<a href="${screenshot.path;relpath}">${index_screenshot}:${screenshot.label;h}</a>${end}</td>
                </tr>
    ${end}
              </tbody>
            </table>
          </div><!-- contents -->
        </li><!-- no white spaces between LI tags.
     --><li>
          <input name="tab${index_testCase}" id="tab${index_testCase}_sequence" type="radio">
          <label for="tab${index_testCase}_sequence" class="tab_sequence" onclick="selectTab(this)">Sequence</label>
          <div class="contents">
            <table class="info">
              <tr><th>Start Time:</th><td>${testCase.stopWatch.startTime;t(yyyy-MM-dd HH:mm:ss.SSS ZZ)}</td></tr>
              <tr><th>End Time:</th><td>${testCase.stopWatch.endTime;t(yyyy-MM-dd HH:mm:ss.SSS ZZ)}</td></tr>
              <tr><th>Duration:</th><td>${testCase.stopWatch.duration;n} ms</td></tr>
            </table>
            <table cellpadding="1" cellspacing="1" border="1">
              <thead>
                <tr class="title status_${testCase.result}"><td>Time</td><td>&Delta;t(ms)</td><td>Seq.</td><td class="indexh">#</td><td rowspan="1" colspan="3">${selenese.name;h}</td><td>Result</td><td>Screenshot</td></tr>
              </thead>
              <tbody>
    ${foreach testCase.resultList result}
                <tr class="cmd_status_${result.result}">
                  <td>${result.startTime;t(HH:mm:ss.SSS)}</td>
                  <td class="number">${result.duration;n}</td>
                  <td>${result.sequence}</td>
                  <td class="index">${result.command.index;i}</td>
      ${foreach result.command.source item}
                  <td>${item;h}</td>
      ${end}
                  <td>${result.result;s}</td>
                  <td>${foreach result.screenshots screenshot , }<a href="${screenshot.path;relpath}">${index_screenshot}:${screenshot.label;h}</a>${end}</td>
                </tr>
    ${end}
              </tbody>
            </table>
          </div><!-- contents -->
        </li><!-- no white spaces between LI tags.
     --><li>
          <input name="tab${index_testCase}" id="tab${index_testCase}_log" type="radio">
          <label for="tab${index_testCase}_log" class="tab_log" onclick="selectTab(this)">Log</label>
          <div class="contents">
            <pre>${foreach testCase.logRecorder.messages msg}${msg;log}
${end}</pre>
          </div>
        </li>
      </ul>
    </div><!-- tabs -->
    <p>[<a href="#">Top</a>]</p>
  ${end}
  </body>
</html>
